<template>
  <ul class="bulletinBoard">
    <li v-for="item in listData" class="flex-c" @click="clickItem(item.path)">
      <div>
        <span class="title">{{ item.title }}</span>
        <span class="num">{{ item.data }}</span>
      </div>
    </li>
  </ul>
</template>

<script setup>
import { computed, ref ,onActivated,onMounted} from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const store = useStore();
const router = useRouter();

const listData = ref([
  {
    title: '今日营业额',
    data: '-',
    path: '/jxtc/allOrder',
  },
  {
    title: '今日有效订单',
    data: '-',
    path: '/jxtc/toBeAllocated',
  },
  {
    title: '今日付款人数',
    data: '-',
    path: '/jxtc/unsigned',
  },
  {
    title: '商户总数',
    data: '-',
    path: '/jxtc/mergeDuplicates',
  },
])

onActivated(() => {
  console.log('bulletinBoard onActivated')
  getDates();
})

//获取统计数据
function getDates(){
  /* getOrderNumberDatas().then(res=>{
    if (res.code == 200) {
      listData.value[0].data=res.data.totalCount
      listData.value[1].data=res.data.todoCount
      listData.value[2].data=res.data.tag3Count
      listData.value[3].data=res.data.tag4Count
    }
  }); */
}

// 点击跳转到页面
function clickItem(path) {
  // router.push(path);
}

onMounted(()=>{
  
})

</script>
<style lang="scss" scoped>
.bulletinBoard {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  color: #fff;
  li {
    width: 280px;
    height: 180px;
    margin: 5px 0px;
    cursor: pointer;
    border-radius: 4px;
    transition-duration: .3s;
    &:hover {
      transform: scale(1.03);
    }
    &:nth-child(1) {
      background-color: #3cdb86;
    }
    &:nth-child(2) {
      background-color: #4480f4;
    }
    &:nth-child(3) {
      background-color: #083045;
    }
    &:nth-child(4) {
      background-color: #f66932;
    }
    span {
      display: block;
      text-align: center;
    }
    span:nth-child(1) {
      margin-bottom: 16px;
    }
  }
  .num {
    font-size: 46px;
  }
}

@media screen and (max-width : 1370px) and (min-width: 1060px) {
  .bulletinBoard {
    justify-content: space-between;
  }
}
  
</style>
